@use '../../../design-system' as *;

:global(#heroGrid.ag-theme-alpine-dark) {
    position: relative;
    overflow: hidden;

    svg[class*='logo-mark'] {
        position: absolute;
        display: block;
        width: 64px * 2;
        height: 48px * 2;
        top: 50%;
        left: 50%;
        transform: translate(-60px, -48px);
    }
    
    &:global(.loaded) svg[class*='logo-mark'] {
        display: none;
    }    
}

:global(#heroGrid.ag-theme-alpine-dark .ag-root-wrapper) {
    --ag-background-color: #001223;
    --ag-foreground-color: #94b2d0;

    --ag-borders: none;
    --ag-row-border-style: none;

    --ag-borders: none;
    --ag-row-border-style: none;

    --ag-row-height: 48px;
    --ag-odd-row-background-color: #00162d;

    --ag-header-height: 30px;
    --ag-header-background-color: #00162d;
    --ag-header-foreground-color: #527497;

    --input-background-color: #001223;
    --input-focus-box-shadow-color: rgba(255, 255, 255, 0.25);

    #{$selector-darkmode} & {
        --ag-background-color: #0E1A23;
        --ag-odd-row-background-color: #081A27

        --ag-foreground-color: #e6f1fc;
        
        --ag-header-background-color: #182834;
        --ag-header-foreground-color: #BDD8EC
    }

    @media screen and (max-width: $breakpoint-hero-small) {
        --ag-range-selection-border-color: transparent;
    }

    align-self: end;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: var(--ag-odd-row-background-color);

    :global(.ag-header-row) {
        font-weight: 400 !important;
    }

    :global(.ag-menu),
    :global(.ag-menu-header) {
        --ag-border-color: #527497;

        color: #94b2d0;
        background-color: #07161b;
        border: none;
    }

    :global(.my-tooltip .ag-chart-tooltip-content) {
        background-color: #07161b;
    }

    :global(.ag-icon.ag-icon-filter) {
        display: none;
    }
}